<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div align="center">
        城市：
        <select id="pro">
            <option value="">请选择</option>
        </select>
        <select id="city">
            <option value="">请选择</option>
        </select>
    </div>
    <script>
       
        // 定义省份与城市的二维数组
        var proList = ["北京", "山西", "山东", "河北", "河南"]
        
        var cityList = [["东城区", "西城区", "朝阳区", "海淀区", "昌平区"],
        ["太原市", "大同市", "临汾市", "晋中市"],
        ["济南市", "青岛市", "运城市", "烟台市"],
        ["唐山市", "石家庄", "秦皇岛", "承德市"],
        ["郑州市", "南阳市", "焦作市", "信阳市"]
        ];
        // console.log(cityList)
        // 填充省份下拉框的数据
        for(var i = 0;i<proList.length;i++){
            //创建元素节点
            var opt = document.createElement("option");
            //创建文本节点
            var txt = document.createTextNode(proList[i]);
            //向option元素追加文本节点
            opt.appendChild(txt);
            //设置下拉框对应的value属性
            opt.value = i ;
            //将option元素追加到省份下拉框中
            document.getElementById("pro").appendChild(opt);

        }
        //绑定省份下拉框的change事件：当i阿拉狂选项发生改变时执行的事件

        //绑定省份下拉框的change事件，得到被选中的值，与二维数组中的城市对应
        document.getElementById("pro").onchange = function(){
            //清空城市下拉框的数据
            document.getElementById("city").options.length = 0;
            //获取下拉框选中的值
            var index = document.getElementById("pro").value;
            

            //判断是否选中指定的省份（index值不为空）
            if (index == "" ){
                //未选中省份，城市为默认的请选择
                document.getElementById("city").innerHTML = `<option value = "">请选择</option>`
                    return ;
            }
            //获取对应城市二维数组中对应的数组
            var citys = cityList[index];
            //遍历城市数组
            for (var i = 0 ; i <citys.length; i++){
                //创建元素节点
                 var opt = document.createElement("option");
                 //创建文本节点
                 var txt = document.createTextNode(citys[i]);
                 //向option元素追加文本节点
                 opt.appendChild(txt)

                 //将option元素追加到省份下拉框中
                 document.getElementById("city").appendChild(opt);
            }
        }
    </script>   
</body>

</html>